<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" >
    <title>mqtt setting</title>
<style>
.sidebar {
    float: left;
    width: 10%;
    height: 100%;
    background-color: #f1f1f1;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.sidebar li a {
    color: #000;
    text-decoration: none;
}

.content {
    float: right;
    width: 80%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
</style>    
</head>
<body>
    <div class="sidebar">
        <ul>
			<li><a href="mqttSetting">MQTT</a></li>
            <li><a href="userSetting">USER</a></li>
            <li><a href="deviceInfo">DEVICE</a></li>
        </ul>
    </div>
    <div class="content">
        <form name="mqttForm">
        <table align="left">
            <caption>MQTT参数设置<caption/>
            <tr>
			<tr>
                <td>主机:</td>
                <td>
                   <input type="text" name="mqttHost" maxlength = "63" placeholder="IP address or domain name" />
                </td>
            </tr>
            <tr>
                <td>端口:</td>
                <td>
                    <input type="number" name="mqttPort" max="65535" />
                </td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="mqttUsername" maxlength = "64" />
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="text" name="mqttPassword" maxlength = "64" />
                </td>
            </tr>

        <tr>
            <td colspan="2" style="text-align: center; padding: 5px;">
                <input type="button" value="保存" onclick="submitForm()"/>
                <input type="button" value="清除" onclick="resetForm()"/>      
        </tr>
        </table>
        </form>
    </div>
</body>
<script>
    function submitForm()
    {
        //验证数据
        if(!mqttForm.mqttHost.value)
        {
            alert("请输入主机！");
            mqttForm.mqttHost.focus();
            return;
        }
 
        if(!mqttForm.mqttPort.value)
        {
            alert("请输入端口！");
            mqttForm.mqttPort.focus();
            return;
        }			
 
        //提交表单
        mqttForm.method = 'POST';
        mqttForm.action = "/mqttParamSave";
        mqttForm.submit();
    }

    function resetForm()
    {
        //重置表单
        document.getElementsByName("mqttForm")[0].reset();        
    }

    window.onload = function requestData()
    {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log("%s", this.responseText);
				
				var obj = JSON.parse(this.responseText);
				console.log("host:%s", obj.host);
				console.log("port:%s", obj.port);
				console.log("username:%s", obj.username);
				console.log("password:%s", obj.Password);
				
				if( obj.hasOwnProperty("host") )
				{
					mqttForm.mqttHost.value = obj.host;
				}
				if( obj.hasOwnProperty("port") )
				{
					var portNum = parseInt(obj.port);
					mqttForm.mqttPort.value = portNum;
				}
				if( obj.hasOwnProperty("username") )
				{
					mqttForm.mqttUsername.value = obj.username;
				}
				if( obj.hasOwnProperty("password") )
				{
					mqttForm.mqttPassword.value = obj.password;
				}				
				
            }
        };   
        xhttp.open("GET", "/mqttValue", true);
        xhttp.send();
    }
</script>
</html>